<template>
  <view class="main">
    <u-navbar
      title="处置汇总"
      back-icon-color="#fff"
      title-color="#fff"
      :background="{ backgroundColor: 'rgb(61, 95, 255)' }"
    >
      <u-image @click="goSearch" slot="right" width="40" height="40" src="/static/image/filter.png" class="u-m-r-20" />
    </u-navbar>
    <view class="u-p-20">
      <!-- 搜索框 -->
      <view class="top flex u-m-b-20" v-if="this.params.type != '4' && this.params.type != '5'">
        <u-grid :col="3" class="content-box" :border="false">
          <u-grid-item :class="isQueryType === '1' ? 'is-click' : ''" @click="changeData('1')">
            <view class="t-c">
              <view class="u-m-b-10">待处置异常</view>
              <view style="color: rgb(61, 95, 255)">{{ disposalData.checkCount }}</view>
            </view>
          </u-grid-item>
          <u-grid-item :class="isQueryType === '2' ? 'is-click' : ''" @click="changeData('2')">
            <view class="t-c">
              <view class="u-m-b-10">临近超时异常</view>
              <view style="color: rgb(61, 95, 255)">{{ disposalData.overtimeCount }}</view>
            </view>
          </u-grid-item>
          <u-grid-item :class="isQueryType === '3' ? 'is-click' : ''" @click="changeData('3')">
            <view class="t-c">
              <view class="u-m-b-10">超时未处置异常</view>
              <view style="color: rgb(61, 95, 255)">{{ disposalData.overtimeNoCount }}</view>
            </view>
          </u-grid-item>
        </u-grid>
      </view>
    </view>

    <scroll-view
      class="content"
      :scroll-y="true"
      refresher-enabled="true"
      :refresher-triggered="triggered"
      :refresher-threshold="50"
      @scrolltolower="onScrollToLower"
      refresher-background="#F5F5F5"
      @refresherrefresh="onRefresh"
    >
      <template v-for="(obj, index) in mylist">
        <view :key="index" class="my-card u-m-b-20 u-p-10" @click="goDetail(obj)">
          <view class="u-flex u-row-between u-p-10">
            <view class="u-flex">
              <!-- <view class="font-w u-font-lg u-m-r-20 my-title" :class="{ 'my-title': info_arr.includes(params.functionCode) }">{{
                obj.customerName
              }}</view> -->

              <view>
                <text
                  class="font-w u-font-lg u-flex-col u-m-r-20"
                  :class="!disposal_code_arr.includes(obj.functionCode) ? 'my-title' : ''"
                  >{{ obj.customerName }}</text
                >
                <text class="u-m-t-10">{{ obj.functionName }}</text>
              </view>
              <u-button
                v-if="disposal_code_arr.includes(obj.functionCode)"
                size="mini"
                plain
                class="u-m-l-20"
                @click="goDetailBtn(obj)"
                >处置</u-button
              >
            </view>
            <view class="u-flex">
              <view v-if="obj.isCheck" class="disposal u-flex" :class="getClass(obj, 'mine')">
                <u-circle-progress
                  v-if="!obj.isComplete && obj.isCheck == '2' && obj.isNeedTimeout && obj.isTimeout === '2'"
                  inactive-color="#fff"
                  :active-color="getPercentColor(obj, 'mine')"
                  :width="50"
                  :percent="getPercentNum(obj, 'mine')"
                  :border-width="4"
                >
                  <view class="time-icon">
                    <view class="icon" />
                  </view>
                </u-circle-progress>
                <view v-else class="time-icon" :class="getBorderClass(obj, 'mine')">
                  <view class="icon" />
                </view>
                <text class="u-flex-1 t-c">矿</text>
              </view>
            </view>
          </view>
          <u-line />

          <view class="u-p-10">
            <view><text class="font-w">异常描述：</text>{{ obj.content }}</view>
            <view>
              <text class="font-w">处置环节：</text>
              <text v-if="obj.nowStatus == '1'">待矿处置</text>
              <text v-if="obj.nowStatus == '2'">待集团核查</text>
              <!-- <text v-if="obj.nowStatus == '3'">待市级核查</text> -->
              <text v-if="obj.nowStatus == '4'">已闭环</text>
            </view>
            <view>
              <text class="font-w">级别：</text>
              <text v-if="obj.level == '1'" class="t-red">报警</text>
              <text v-if="obj.level == '2'" class="t-orange">预警</text>
            </view>
            <view><text class="font-w">区县：</text>{{ obj.countyName }}</view>
            <view><text class="font-w">预警时间：</text>{{ obj.alarmTime }}</view>
          </view>
        </view>
      </template>
      <template v-if="showEmpty">
        <view class="c-empty p-absolute-center">
          <u-empty text="抱歉，暂无相关数据~" :src="require('@/static/image/empty.png')"></u-empty>
        </view>
      </template>
      <view class="p-t-10 p-b-10" v-else>
        <u-loadmore :status="status" />
      </view>
    </scroll-view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      status: "loading",
      triggered: false, // 下拉刷新
      showEmpty: false,
      emitEvent: "disposeListIndex",
      isQueryType: "",
      cardInfo: {},
      searchData: {
        btType: "",
        countyNo: "",
        customerNo: "",
        customerName: "", //企业名称
        functionCode: "",
        beginDate: "",
        endDate: "",
        // 注意排序与default-sort对应
        orderBy: "",
        orderFlag: "",
        disposalLink: "",
        disposalCondition: "",
        isSelf: "",
        pageNumber: 1,
        pageSize: 20,
      },
      params: {},
      mylist: [],
      no_name_arr: ["12", "08", "07", "06", "04"],
      disposal_code_arr: ["12", "08", "07", "06", "33", "19"],
      guifan_arr: ["12", "08", "07"],
      info_arr: [
        "01",
        "02",
        "03",
        "04",
        "20",
        "19",
        "18",
        "05",
        "09",
        "11",
        "17",
        "10",
        "21",
        "22",
        "23",
        "24",
        "25",
        "26",
        "27",
        "28",
        "29",
        "30",
        "31",
        "34",
        "35",
      ],
      // 按钮样式
      searchSrc: require("@/static/image/search.png"),
      customStyle: {
        // 注意驼峰命名，并且值必须用引号包括，因为这是对象
        color: "#333333",
        background: "#F1F5F3",
        borderRadius: "20rpx",
        width: "40%",
        border: "none",
      },
      submitStyle: {
        color: "#fff",
        background: "#288CFE",
        borderRadius: "20rpx",
        width: "40%",
        border: "none",
      },
      disposalData: {},
      isCity: false,
    };
  },

  onLoad(obj) {
    this.isCity = getApp().globalData.userInfo.superviseLevel === "40";
    this.params = JSON.parse(obj.item);
    this.searchData = { ...this.searchData, ...this.params };
    if (this.params.type == "1") {
      this.searchData.disposalLink = "6";
      this.searchData.disposalCondition = "";
    } else if (this.params.type == "2") {
      this.searchData.disposalCondition = "4";
      this.searchData.disposalLink = "";
    } else if (this.params.type == "3") {
      this.searchData.disposalCondition = "7";
      this.searchData.disposalLink = "";
    }
    this.$set(this.searchData, "countyNo", this.params.countyNo);
    this.getData();
    this.getDisposalCountByHome();
    uni.$on(this.emitEvent, async (res) => {
      this.searchData = {
        ...res,
        pageNumber: 1,
      };
      this.isQueryType = "";
      this.init();
      this.getDisposalCountByHome();
      this.getData();
    });
  },
  onUnload() {
    // 清除监听
    uni.$off(this.emitEvent);
  },
  methods: {
    /**
     * 初始化
     */
    init() {
      this.searchData.pageNumber = 1;
      this.status = "loading";
      this.showEmpty = false;
    },
    //获取处置管理数据
    getDisposalCountByHome() {
      const params = {
        startTime: this.searchData.beginDate,
        customerNo: this.searchData.customerNo,
        countyNo: this.searchData.countyNo,
        endTime: this.searchData.endDate,
      };
      this.$post("/analyzeReports/getDisposalCountByHome", params).then((res) => {
        const { body } = res;
        if (body) {
          this.disposalData = body;
        }
      });
    },
    goDetail(obj) {
      if (!this.info_arr.includes(obj.functionCode)) {
        return;
      }
      let params = {
        id: obj.id,
        customerName: obj.customerName,
        functionCode: obj.functionCode,
        detailType: obj?.detailType,
        isJtMine: true,
      };
      uni.navigateTo({
        url: `../chartInfo?item=${JSON.stringify(params)}`,
      });
    },
    changeData(type) {
      this.isQueryType = type;
      if (type == "1") {
        this.searchData.disposalLink = "6";
        this.searchData.disposalCondition = "";
      } else if (type == "2") {
        this.searchData.disposalCondition = "4";
        this.searchData.disposalLink = "";
      } else if (type == "3") {
        this.searchData.disposalCondition = "7";
        this.searchData.disposalLink = "";
      }
      this.init();
      this.getData();
    },
    goDetailBtn(obj) {
      const code = obj.functionCode;
      if (!this.disposal_code_arr.includes(code)) {
        return;
      }
      //
      let params = {
        id: obj.id,
        customerName: obj.customerNameQx || obj.customerName,
        functionCode: code,
        detailType: obj?.detailType,
      };
      if (this.disposal_code_arr.includes(code)) {
        params = {
          ...params,
          functionTableName: obj.tableName,
          pageNumber: 1,
          pageSize: 20,
          sensorType: "",
          type: obj.avoidTypeName,
          isJtMine: true,
        };
      }
      uni.navigateTo({
        url: `../chartInfo?item=${JSON.stringify(params)}`,
      });
    },
    handleSearch() {
      this.mylist = [];
      this.searchData.pageNumber = 1;
      this.status = "loading";
      this.showEmpty = false;
      this.getData();
    },
    onRefresh() {
      if (this.Isfreshing) return;
      this.Isfreshing = true;
      if (!this.triggered) {
        // 保证刷新状态下，triggered为true
        this.triggered = true;
        this.getData();
        setTimeout(() => {
          this.triggered = false; // 触发onRestore，关闭刷新图标
          this.Isfreshing = false;
        }, 1200);
      }
    },
    onScrollToLower() {
      if (this.status == "loading") {
        this.searchData.pageNumber++;
        this.getData();
      }
    },
    /**
     * 搜索
     */
    goSearch() {
      const form = {
        ...this.searchData,
      };
      uni.navigateTo({
        url: `./screen?form=${JSON.stringify(form)}&emitEvent=${this.emitEvent}`,
      });
    },
    async getData() {
      const { body } = await this.$post("/analyzeReports/findAlarmAllByPage/dataList", this.searchData);
      if (Array.isArray(body.content)) {
        const myarr = body.content;

        this.mylist = this.searchData.pageNumber === 1 ? myarr : this.mylist.concat(myarr);
        // 到底了
        if (myarr.length < this.searchData.pageSize) {
          this.status = "nomore";
        }
        // 数据空
        if (this.searchData.pageNumber === 1 && this.mylist && this.mylist.length === 0) {
          this.showEmpty = true;
        } else {
          this.showEmpty = false;
        }
      } else {
        this.showEmpty = true;
      }
    },

    getClass(row, type) {
      let className = "";
      if (type === "mine") {
        if (row.isCheck == "1") {
          className = "hourglass-white-dispose"; // 可参与
          if (row.isComplete === "1") {
            className = "onTime-dispose"; //完成
          }
        } else if (row.isCheck == "2") {
          if (row.isTimeout === "1") {
            className = "timeout-no-dispose"; //超时未完成
          } else if (row.isTimeout === "2") {
            if (row.isComplete === "1") {
              className = "onTime-dispose"; //按时完成
            } else if (row.isComplete === "2") {
              className = "timeout-dispose"; //超时完成
            } else {
              className = "toBe-dispose"; //待处置
            }
          } else {
            if (row.isComplete === "1") {
              className = "onTime-dispose"; //完成
            } else {
              className = "toBe-dispose"; //待处置
            }
          }
        }
      } else if (type == "county") {
        if (row.isCheckCounty == "2") {
          className = "hourglass-white-dispose"; // 可参与
          if (row.isCompleteCounty === "1") {
            className = "onTime-dispose"; //完成
          }
        } else if (row.isCheckCounty == "1") {
          if (row.isTimeoutCounty === "1") {
            className = "timeout-no-dispose"; //超时未完成
          } else if (row.isTimeoutCounty === "2") {
            if (row.isCompleteCounty === "1") {
              className = "onTime-dispose"; //按时完成
            } else if (row.isCompleteCounty === "2") {
              className = "timeout-dispose"; //超时完成
            } else {
              className = "toBe-dispose"; //待处置
            }
          } else {
            if (row.isCompleteCounty === "1") {
              className = "onTime-dispose"; //完成
            } else {
              className = "toBe-dispose"; //待处置
            }
          }
        }
      } else if (type == "city") {
        if (row.isCheckCity == "2") {
          className = "hourglass-white-dispose"; // 可参与
          if (row.isCompleteCity === "1") {
            className = "onTime-dispose"; //完成
          }
        } else if (row.isCheckCity == "1") {
          if (row.isTimeoutCity === "1") {
            className = "timeout-no-dispose"; //超时未完成
          } else if (row.isTimeoutCity === "2") {
            if (row.isCompleteCity === "1") {
              className = "onTime-dispose"; //按时完成
            } else if (row.isCompleteCity === "2") {
              className = "timeout-dispose"; //超时完成
            } else {
              className = "toBe-dispose"; //待处置
            }
          } else {
            if (row.isCompleteCity === "1") {
              className = "onTime-dispose"; //完成
            } else {
              className = "toBe-dispose"; //待处置
            }
          }
        }
      }

      return className;
    },
    getBorderClass(row, type) {
      let className = "time-icon-border";
      if (type === "mine") {
        if (row.isCheck == "2") {
          if (row.isTimeout === "1") {
            className = "time-icon-border-red"; //超时未完成
          }
        }
      } else if (type == "county") {
        if (row.isCheckCounty == "1") {
          if (row.isTimeoutCounty === "1") {
            className = "time-icon-border-red"; //超时未完成
          }
        }
      } else if (type == "city") {
        if (row.isCheckCity == "1") {
          if (row.isTimeoutCity === "1") {
            className = "time-icon-border-red"; //超时未完成
          }
        }
      }

      return className;
    },
    getPercentColor(row, type) {
      let color = "#FF9500";
      if (type === "mine") {
        if (row.isCheck == "2") {
          const time = new Date().getTime() - new Date(row.alarmTime).getTime();
          let deadLine = Number(row.isNeedTimeout) * 60 * 60000;
          const lastTime = deadLine - time;
          if (lastTime < 120 * 60000) {
            color = "#FF4A4A"; //可参与
          }
        }
      } else if (type == "county") {
        if (row.isCheckCounty == "1") {
          const time = new Date().getTime() - new Date(row.alarmTime).getTime();
          let deadLine = Number(row.isNeedTimeoutCounty) * 60 * 60000;
          const lastTime = deadLine - time;
          if (lastTime < 120 * 60000) {
            color = "#FF4A4A"; //可参与
          }
        }
      } else if (type == "city") {
        if (row.isCheckCity == "1") {
          const time = new Date().getTime() - new Date(row.alarmTime).getTime();
          let deadLine = Number(row.isNeedTimeoutCity) * 60 * 60000;
          const lastTime = deadLine - time;
          if (lastTime < 120 * 60000) {
            color = "#FF4A4A"; //可参与
          }
        }
      }
      return color;
    },
    getPercentNum(row, type) {
      let timeNum = "";
      if (type === "mine") {
        if (row.isCheck == "2" && row.isNeedTimeout && row.isTimeout === "2") {
          const time = new Date().getTime() - new Date(row.alarmTime).getTime();
          let deadLine = Number(row.isNeedTimeout) * 60 * 60000;
          const lastTime = deadLine - time;
          const percent = (lastTime / deadLine) * 100;
          timeNum = percent.toFixed(2);
        }
      } else if (type == "county") {
        if (row.isCheckCounty == "1" && row.isNeedTimeoutCounty && row.isTimeoutCounty === "2") {
          const time = new Date().getTime() - new Date(row.alarmTime).getTime();
          let deadLine = Number(row.isNeedTimeoutCounty) * 60 * 60000;
          const lastTime = deadLine - time;
          const percent = (lastTime / deadLine) * 100;
          timeNum = percent.toFixed(2);
        }
      } else if (type == "city") {
        if (row.isCheckCity == "1" && row.isNeedTimeoutCity && row.isTimeoutCity === "2") {
          const time = new Date().getTime() - new Date(row.alarmTime).getTime();
          let deadLine = Number(row.isNeedTimeoutCity) * 60 * 60000;
          const lastTime = deadLine - time;
          const percent = (lastTime / deadLine) * 100;
          timeNum = percent.toFixed(2);
        }
      }
      return Number(timeNum);
    },
  },
};
</script>
<style lang="scss" scoped>
// 背景
.main {
  background: #f7f7fa;
}
.my-card {
  border-radius: 12rpx !important;
  background: white;
}

.top {
}

.font-w {
  font-weight: bold;
}

.content {
  flex: 1;
  overflow: hidden;
  padding: 0 20rpx 20rpx 20rpx;
  box-sizing: border-box;
  background: inherit;
}

.myinput {
  background: white;
  border-color: white !important;
}

.my-title {
  text-decoration: underline;
  color: #409eff;
}
.popup-content {
  // 弹出层样式
  padding: 24rpx;
  text-align: center;
  .checkbox {
    &-item {
      height: 100rpx;
    }
    /deep/.u-checkbox-group {
      display: inline;
      .u-checkbox {
        border-bottom: 1rpx solid #dddddd;
        justify-content: space-between;
        flex-flow: row-reverse;
        .u-checkbox__icon-wrap {
          background: rgba(1, 72, 51, 0.2);
          border: none;
        }
      }
    }
    /deep/.u-radio-group {
      display: inline;
      .u-radio {
        border-bottom: 1rpx solid #dddddd;
        justify-content: space-between;
        flex-flow: row-reverse;
        height: 90rpx;
        .u-radio__icon-wrap {
          background: rgba(1, 72, 51, 0.2);
          border: none;
        }
      }
    }
  }
}
/deep/.is-click {
  .u-grid-item-box {
    border: 1rpx solid rgb(61, 95, 255);
  }
}
/deep/ .u-grid-item-box {
  background: white;
  overflow: hidden;
}
.u-grid-item {
  background: inherit !important;
  padding: 6rpx;
}
.content-box {
  font-size: 24rpx;
}
/deep/.disposal {
  width: 100rpx;
  margin: 20rpx;
  height: 50rpx;
  border-radius: 50rpx;
  padding-right: 12rpx;
  .u-circle-progress {
    background: transparent !important;
    margin-left: -4rpx;
  }
}
.onTime-dispose {
  background: #67c239;
  color: #fff;
  .time-icon {
    width: 50rpx;
    height: 50rpx;
    border-radius: 50%;
    background: #67c239;
    box-shadow: 2rpx 0 4rpx rgba(0, 0, 0, 0.25);
    display: flex;
    justify-content: center;
    align-items: center;
    .icon {
      height: 28rpx;
      width: 28rpx;
      background: url("/static/image/guard/guard_complete_icon.svg") no-repeat 100% 100%/100% 100%;
    }
  }
}
.toBe-dispose {
  background: #fdf1e9;
  color: #333333;
  border: 1rpx solid #ff9500;
  .time-icon {
    width: 48rpx;
    height: 50rpx;
    border-radius: 50%;
    background: #fdf1e9;
    box-shadow: 2rpx 0 4rpx rgba(0, 0, 0, 0.25);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: -4rpx;
    .icon {
      height: 32rpx;
      width: 32rpx;
      background: url("/static/image/guard/guard_hourglass_orange_icon.svg") no-repeat 100% 100%/100% 100%;
    }
  }
}
.timeout-dispose {
  background: #67c239;
  color: #fff;
  .time-icon {
    width: 50rpx;
    height: 50rpx;
    border-radius: 50%;
    background: #67c239;
    box-shadow: 2rpx 0 4rpx rgba(0, 0, 0, 0.25);
    display: flex;
    justify-content: center;
    align-items: center;
    .icon {
      height: 28rpx;
      width: 28rpx;
      background: url("/static/image/guard/alarm_clock_green_icon.svg") no-repeat 100% 100%/100% 100%;
    }
  }
}
.timeout-no-dispose {
  background: #fdd9d9;
  color: #333333;
  border: 1rpx solid #ff4a4a;
  .time-icon {
    width: 48rpx;
    height: 48rpx;
    margin-left: -2rpx;
    border-radius: 50%;
    background: #fdd9d9;
    box-shadow: 2rpx 0 4rpx rgba(0, 0, 0, 0.25);
    display: flex;
    justify-content: center;
    align-items: center;
    .icon {
      height: 28rpx;
      width: 28rpx;
      background: url("/static/image/guard/alarm_clock_red_icon.svg") no-repeat 100% 100%/100% 100%;
    }
  }
}
.hourglass-white-dispose {
  background: #dddddd;
  color: #999999;
  .time-icon {
    width: 50rpx;
    height: 50rpx;
    border-radius: 50%;
    background: #dddddd;
    box-shadow: 2rpx 0 4rpx rgba(0, 0, 0, 0.25);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: -2rpx;
    .icon {
      height: 32rpx;
      width: 32rpx;
      background: url("/static/image/guard/guard_hourglass_white_icon.svg") no-repeat 100% 100%/100% 100%;
    }
  }
}
.time-icon-border {
  border: 4rpx solid #fff;
}
.time-icon-border-red {
  border: 4rpx solid #ff4a4a;
}
</style>
